<template>
	<view class="main">
		<view class="self">
			<view class="account">
				<image :src="item.user.headImg">
				</image>
				<text>{{item.user.username}}</text>
			</view>
			<view class="price">
				<image src="/static/images/money.png">
				</image>
				<text style="color:blue">{{item.price}}</text>
			</view>
		</view>
		<view class="content">
			<view class="title">物品：{{item.title}}</view>
			<view class="type">类型：{{item.status}}</view>
			<view class="description">描述：{{item.description}}</view>
			<view class="photo" v-show="item.imgSrc">
				<view class="pgoto_title">照片:</view>
				<view class="photo_img" style="margin-top: 20rpx;">
					<image v-for="p in item.imgSrc" :src="p"></image>
				</view>
			</view>
			<view class="contact">
				<view class="contact_title">联系方式:</view>
				<view class="contact_content">
					<view v-show="item.contactWx">{{"微信：" + item.contactWx}}</view>
					<view v-show="item.contactQq">{{"QQ：" + item.contactQq}}</view>
					<view v-show="item.contactPhone">{{"手机号：" + item.contactPhone}}</view>
				</view>
			</view>
			<view v-show="item.userId==user.userId"><text @click="toDelete">删除</text>
			</view>
			<view class="time">{{item.addTime}}</view>
		</view>
		<!-- 删除确认框 -->
		<u-modal :show="deleteShow" @confirm="deleteUnused" @cancel="closeDeleteShow" content="确定要删除吗?"
			showCancelButton></u-modal>

	</view>
</template>

<script setup>
	import {
		defineProps,
		ref,
		reactive,
		defineEmits
	} from "vue";
	const data = defineProps({
		item: {
			type: Object,
			default: '{}'
		},
		type: {
			type: Number,
			default: -1
		}
	})
	import {
		useUnusedStore
	} from "@/stores/unusedStore.js"
	const unusedStore = useUnusedStore()
	const deleteShow = ref(false)
	const emits = defineEmits(['deletedShow'])

	function toDelete() {
		console.log(data.type)
		deleteShow.value = true;
	}

	function closeDeleteShow() {
		deleteShow.value = false;
	}
	const user = reactive({
		...JSON.parse(uni.getStorageSync("user"))
	});
	async function deleteUnused() {
		//删除我发布的闲置

		await unusedStore.deleteUnused({
			unusedId: data.item.unusedId,
			userId: user.userId
		});
		deleteShow.value = false;
		emits('deletedShow', true)
		if (data.type == -1) {
			await unusedStore.getUnusedList({
				schoolId: user.schoolId
			})
		} else {
			await unusedStore.getUnusedList({
				status: data.type,
				schoolId: user.schoolId
			})
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: rgba(0, 0, 0, 0.2);
		width: 100%;
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		box-shadow: 20rpx 20rpx 20rpx 20rpx rgba(0, 0, 0, 0.1);
		border-radius: 20rpx;
		font-weight: bolder;

		.self {
			width: 100%;
			height: 100rpx;
			border-bottom: 8rpx solid #e3e3e3;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.account {
				margin-left: 10rpx;
				width: 300rpx;
				height: 100rpx;


				display: flex;
				justify-content: space-around;
				align-items: center;

				image {
					width: 85rpx;
					height: 85rpx;
					border-radius: 50rpx;

				}

				text {
					width: 210rpx;
					font-size: 35rpx;

				}
			}

			.price {
				width: 150rpx;
				height: 100rpx;
				display: flex;
				align-items: center;
				margin-right: 10rpx;

				justify-content: space-around;

				image {
					width: 55rpx;
					height: 60rpx;
					margin-right: 5rpx;
					margin-top: -10rpx;
				}
			}
		}

		.content {

			display: flex;
			flex-direction: column;

			padding: 15rpx;
			position: relative;

			.type {
				margin-top: 20rpx;
			}

			.description {
				margin-top: 20rpx;
			}

			.photo {
				margin-top: 20rpx;

				.photo_img {
					display: flex;
					flex-wrap: wrap;

					image {
						width: 200rpx;
						height: 200rpx;
						margin-left: 15rpx;
						margin-top: 15rpx;
					}
				}
			}

			.contact {
				margin-top: 20rpx;

				margin-bottom: 50rpx;

				.contact_content {
					margin-top: 10rpx;
					font-size: 25rpx;
				}
			}

			.time {
				margin-right: 10rpx;
				position: absolute;
				bottom: 5rpx;
				right: 5rpx;
			}
		}
	}
</style>